import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import moment from 'moment';
import {
  Grid,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Box,
  useTheme
} from '@mui/material';

// Icons
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import PaymentsIcon from '@mui/icons-material/Payments';
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
import CancelIcon from '@mui/icons-material/Cancel';
import EventIcon from '@mui/icons-material/Event';
import AutorenewIcon from '@mui/icons-material/Autorenew';

// Styled Components
import {
  StyledPaper,
  StyledAppButton,
  StyledTable
} from 'components/objects/StyledComponents';

/**
 * SubscriptionInfoDesktop component that displays subscription details in table view
 * 
 * @param {Object} props
 * @param {Object} props.plan - Selected plan object with title, currency, and price
 * @param {Object} props.subscription - Current subscription object
 * @param {Function} props.onCancelSubscription - Function to handle subscription cancellation
 * @param {Function} props.formatMoney - Utility function to format currency
 */
const SubscriptionInfoDesktop = ({
  plan = {}, // Default to empty object to prevent undefined errors
  subscription = {}, // Default to empty object
  onCancelSubscription,
  formatMoney
}) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const isDarkMode = theme.palette.mode === 'dark';

  // Helper function to format Unix timestamp to date
  const formatDate = (unixTimestamp) => {
    if (!unixTimestamp) return 'N/A';
    return moment.unix(unixTimestamp).format("DD/MM/YYYY");
  };

  return (
    <Grid item xs={12} md={6}>
      <StyledPaper darkMode={isDarkMode} sx={{ p: 3 }}>
        {/* Subscription Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
          <SubscriptionsIcon 
            color="primary" 
            sx={{ fontSize: 32, mr: 2 }}
          />
          <Typography variant="h5" component="h1">
            {t("dashboardPage.yourSubscription")}
          </Typography>
        </Box>

        {/* Table View */}
        <TableContainer>
          <StyledTable darkMode={isDarkMode}>
            <TableHead>
              {/* Icons Row */}
              <TableRow>
                <TableCell sx={{ textAlign: 'center', pb: 0 }}>
                  <PaymentsIcon sx={{ fontSize: 20 }} />
                </TableCell>
                <TableCell sx={{ textAlign: 'center', pb: 0 }}>
                  <AttachMoneyIcon sx={{ fontSize: 20 }} />
                </TableCell>
                {subscription?.canceled_at ? (
                  <>
                    <TableCell sx={{ textAlign: 'center', pb: 0 }}>
                      <CancelIcon color="error" sx={{ fontSize: 20 }} />
                    </TableCell>
                    <TableCell sx={{ textAlign: 'center', pb: 0 }}>
                      <EventIcon color="warning" sx={{ fontSize: 20 }} />
                    </TableCell>
                  </>
                ) : (
                  <TableCell sx={{ textAlign: 'center', pb: 0 }}>
                    <AutorenewIcon color="success" sx={{ fontSize: 20 }} />
                  </TableCell>
                )}
              </TableRow>
              
              {/* Text Headers Row */}
              <TableRow>
                <TableCell sx={{ pt: 0 }}>
                  {t("dashboardPage.plan")}
                </TableCell>
                <TableCell sx={{ pt: 0 }}>
                  {t("dashboardPage.price")}
                </TableCell>
                {subscription?.canceled_at ? (
                  <>
                    <TableCell sx={{ pt: 0 }}>
                      {t("dashboardPage.canceledAt")}
                    </TableCell>
                    <TableCell sx={{ pt: 0 }}>
                      {t("dashboardPage.willDeactivateAt")}
                    </TableCell>
                  </>
                ) : (
                  <TableCell sx={{ pt: 0 }}>
                    {t("dashboardPage.willRenewOn")}
                  </TableCell>
                )}
              </TableRow>
            </TableHead>
            <TableBody>
              <TableRow>
                <TableCell>
                  <Typography fontWeight="medium">
                    {plan?.title || t("dashboardPage.noPlanSelected")}
                  </Typography>
                </TableCell>
                <TableCell>
                  <Typography fontWeight="medium">
                    {plan?.price !== undefined && plan?.currency ? 
                      formatMoney("it", plan.currency, plan.price) : 
                      "—"
                    }
                  </Typography>
                </TableCell>
                {subscription?.canceled_at ? (
                  <>
                    <TableCell>
                      <Typography>
                        {formatDate(subscription.canceled_at)}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography>
                        {formatDate(subscription.current_period_end)}
                      </Typography>
                    </TableCell>
                  </>
                ) : (
                  <TableCell>
                    <Typography>
                      {formatDate(subscription?.current_period_end)}
                    </Typography>
                  </TableCell>
                )}
              </TableRow>
            </TableBody>
          </StyledTable>
        </TableContainer>
        
        {/* Action Buttons */}
        <Box sx={{ display: 'flex', gap: 2, mt: 3 }}>
          <StyledAppButton 
            darkMode={isDarkMode}
            component={Link} 
            to="/plan" 
            fullWidth 
            variant="outlined"
            sx={{ py: 1 }}
          >
            {t("dashboardPage.changePlan")}
          </StyledAppButton>
          
          {subscription && !subscription.canceled_at && (
            <StyledAppButton 
              darkMode={isDarkMode}
              onClick={() => onCancelSubscription(subscription.id)} 
              fullWidth
              variant="outlined"
              color="error"
              disabled={!subscription.id}
              sx={{ py: 1 }}
            >
              {t("dashboardPage.deleteSubscription")}
            </StyledAppButton>
          )}
        </Box>
      </StyledPaper>
    </Grid>
  );
};

export default SubscriptionInfoDesktop;